<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>退款申请管理</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background-color: #f5f5f5;
            color: #333;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .header {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }

        .header h1 {
            color: #2c3e50;
            margin-bottom: 10px;
        }

        .filter-section {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }

        .filter-row {
            display: flex;
            gap: 15px;
            align-items: center;
            flex-wrap: wrap;
        }

        .filter-item {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .filter-item label {
            font-size: 14px;
            color: #666;
        }

        .filter-item input, .filter-item select {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }

        .filter-button {
            background: #3498db;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            margin-left: auto;
        }

        .filter-button:hover {
            background: #2980b9;
        }

        .tabs {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }

        .tab-header {
            display: flex;
            border-bottom: 1px solid #eee;
            margin-bottom: 20px;
        }

        .tab-item {
            padding: 10px 20px;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all 0.3s;
        }

        .tab-item.active {
            border-bottom-color: #3498db;
            color: #3498db;
        }

        .tab-item:hover {
            background: #f8f9fa;
        }

        .table-container {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .table {
            width: 100%;
            border-collapse: collapse;
        }

        .table th {
            background: #f8f9fa;
            padding: 12px;
            text-align: left;
            font-weight: 600;
            color: #333;
            border-bottom: 1px solid #eee;
        }

        .table td {
            padding: 12px;
            border-bottom: 1px solid #eee;
        }

        .table tr:hover {
            background: #f8f9fa;
        }

        .status {
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
        }

        .status-pending {
            background: #fff3cd;
            color: #856404;
        }

        .status-processed {
            background: #d4edda;
            color: #155724;
        }

        .status-rejected {
            background: #f8d7da;
            color: #721c24;
        }

        .view-button {
            background: #28a745;
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
        }

        .view-button:hover {
            background: #218838;
        }

        .pagination {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            background: white;
            border-top: 1px solid #eee;
        }

        .pagination-info {
            color: #666;
            font-size: 14px;
        }

        .pagination-controls {
            display: flex;
            gap: 5px;
        }

        .page-button {
            padding: 8px 12px;
            border: 1px solid #ddd;
            background: white;
            cursor: pointer;
            border-radius: 4px;
        }

        .page-button.active {
            background: #3498db;
            color: white;
            border-color: #3498db;
        }

        .page-button:hover:not(.active) {
            background: #f8f9fa;
        }

        .loading {
            text-align: center;
            padding: 40px;
            color: #666;
        }

        .error {
            text-align: center;
            padding: 40px;
            color: #dc3545;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>退款申请管理</h1>
            <p>管理平台退款申请，支持查询、筛选和分页</p>
        </div>

        <div class="filter-section">
            <div class="filter-row">
                <div class="filter-item">
                    <label>患者信息</label>
                    <input type="text" id="patientInfo" placeholder="输入手机号">
                </div>
                <div class="filter-item">
                    <label>申请开始时间</label>
                    <input type="datetime-local" id="applyStartTime">
                </div>
                <div class="filter-item">
                    <label>申请结束时间</label>
                    <input type="datetime-local" id="applyEndTime">
                </div>
                <button class="filter-button" onclick="loadData()">筛选</button>
            </div>
        </div>

        <div class="tabs">
            <div class="tab-header">
                <div class="tab-item active" onclick="setTab('all')">全部</div>
                <div class="tab-item" onclick="setTab('pending')">待处理</div>
                <div class="tab-item" onclick="setTab('processed')">已处理</div>
                <div class="tab-item" onclick="setTab('rejected')">已拒绝</div>
                <div style="margin-left: auto;">
                    <button class="filter-button" onclick="clearCache()" style="margin: 0;">清除缓存</button>
                </div>
            </div>

            <div class="table-container">
                <table class="table">
                    <thead>
                        <tr>
                            <th>服务编号</th>
                            <th>申请时间</th>
                            <th>用户</th>
                            <th>退款金额</th>
                            <th>来源</th>
                            <th>状态</th>
                            <th>处理时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="tableBody">
                        <tr>
                            <td colspan="8" class="loading">加载中...</td>
                        </tr>
                    </tbody>
                </table>

                <div class="pagination">
                    <div class="pagination-info" id="paginationInfo">
                        共0页/0条数据
                    </div>
                    <div class="pagination-controls" id="paginationControls">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        let currentPage = 1;
        let pageSize = 10;
        let currentStatus = null;
        let totalPages = 0;
        let totalCount = 0;

        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            loadData();
        });

        // 设置标签页
        function setTab(status) {
            // 更新标签页样式
            document.querySelectorAll('.tab-item').forEach(item => {
                item.classList.remove('active');
            });
            event.target.classList.add('active');

            // 设置状态筛选
            switch(status) {
                case 'all':
                    currentStatus = null;
                    break;
                case 'pending':
                    currentStatus = 0;
                    break;
                case 'processed':
                    currentStatus = 1;
                    break;
                case 'rejected':
                    currentStatus = 2;
                    break;
            }

            currentPage = 1;
            loadData();
        }

        // 加载数据
        async function loadData() {
            try {
                // 显示加载状态
                document.getElementById('tableBody').innerHTML = '<tr><td colspan="8" class="loading">加载中...</td></tr>';

                // 构建查询参数
                const params = new URLSearchParams({
                    pageIndex: currentPage,
                    pageSize: pageSize
                });

                if (currentStatus !== null) {
                    params.append('status', currentStatus);
                }

                const patientInfo = document.getElementById('patientInfo').value;
                if (patientInfo) {
                    params.append('patientInfo', patientInfo);
                }

                const applyStartTime = document.getElementById('applyStartTime').value;
                if (applyStartTime) {
                    params.append('applyStartTime', applyStartTime);
                }

                const applyEndTime = document.getElementById('applyEndTime').value;
                if (applyEndTime) {
                    params.append('applyEndTime', applyEndTime);
                }

                // 发送请求
                const response = await fetch(`/api/RefundApplication/list?${params}`);
                const result = await response.json();

                if (result.success) {
                    displayData(result.data);
                } else {
                    throw new Error(result.message || '加载数据失败');
                }
            } catch (error) {
                console.error('加载数据失败:', error);
                document.getElementById('tableBody').innerHTML = '<tr><td colspan="8" class="error">加载数据失败: ' + error.message + '</td></tr>';
            }
        }

        // 显示数据
        function displayData(data) {
            const tableBody = document.getElementById('tableBody');
            
            if (data.items.length === 0) {
                tableBody.innerHTML = '<tr><td colspan="8" class="loading">暂无数据</td></tr>';
                return;
            }

            const rows = data.items.map(item => `
                <tr>
                    <td>${item.applicationNo || '-'}</td>
                    <td>${formatDateTime(item.applyTime)}</td>
                    <td>${item.userPhone || '-'}</td>
                    <td>¥${item.amount?.toFixed(2) || '0.00'}</td>
                    <td>${item.source || '-'}</td>
                    <td><span class="status status-${getStatusClass(item.status)}">${item.statusText || '-'}</span></td>
                    <td>${formatDateTime(item.processTime) || '-'}</td>
                    <td>
                        <button class="view-button" onclick="viewDetail(${item.id})">查看</button>
                    </td>
                </tr>
            `).join('');

            tableBody.innerHTML = rows;

            // 更新分页信息
            totalPages = data.totalPages;
            totalCount = data.totalCount;
            updatePagination();
        }

        // 更新分页控件
        function updatePagination() {
            const paginationInfo = document.getElementById('paginationInfo');
            const paginationControls = document.getElementById('paginationControls');

            paginationInfo.textContent = `共${totalPages}页/${totalCount}条数据`;

            let controls = '';

            // 上一页按钮
            if (currentPage > 1) {
                controls += `<button class="page-button" onclick="goToPage(${currentPage - 1})">‹</button>`;
            }

            // 页码按钮
            const startPage = Math.max(1, currentPage - 2);
            const endPage = Math.min(totalPages, currentPage + 2);

            for (let i = startPage; i <= endPage; i++) {
                controls += `<button class="page-button ${i === currentPage ? 'active' : ''}" onclick="goToPage(${i})">${i}</button>`;
            }

            // 下一页按钮
            if (currentPage < totalPages) {
                controls += `<button class="page-button" onclick="goToPage(${currentPage + 1})">›</button>`;
            }

            paginationControls.innerHTML = controls;
        }

        // 跳转到指定页
        function goToPage(page) {
            currentPage = page;
            loadData();
        }

        // 查看详情
        function viewDetail(id) {
            alert(`查看退款申请详情，ID: ${id}`);
            // 这里可以跳转到详情页面或打开模态框
        }

        // 清除缓存
        async function clearCache() {
            try {
                const response = await fetch('/api/RefundApplication/clear-cache', {
                    method: 'POST'
                });
                const result = await response.json();
                
                if (result.success) {
                    alert('缓存清除成功');
                    loadData(); // 重新加载数据
                } else {
                    alert('缓存清除失败: ' + result.message);
                }
            } catch (error) {
                alert('缓存清除失败: ' + error.message);
            }
        }

        // 格式化日期时间
        function formatDateTime(dateTime) {
            if (!dateTime) return '';
            const date = new Date(dateTime);
            return date.toLocaleString('zh-CN');
        }

        // 获取状态样式类
        function getStatusClass(status) {
            switch(status) {
                case 0: return 'pending';
                case 1: return 'processed';
                case 2: return 'rejected';
                default: return 'pending';
            }
        }
    </script>
</body>
</html> 